<template>
    <div class="audit_manage">
        <!--电销权限管理-->
        <div class="search" v-if="!isCaptain" v-show="showAuditorSearch">
            <el-form ref="form" :inline="true" :model="form">
                <!--账号名称-->
                <el-form-item prop="username" :label="$t('common.accountName')">
                    <el-input v-model="form.username" class="inputPhone" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
                <!--角色类型-->
                <el-form-item prop="roleId" :label="$t('common.roleType')">
                    <el-select v-model="form.roleId" @change="roleTypeChange">
                        <el-option v-for="item in customTypeList" :key="item.roleId" :value="item.roleId" :label="$i18n.locale==='zhCN' ? item.roleName : item.idName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" icon="search">{{$t('common.search')}}</el-button>
                </el-form-item>
            </el-form><!--end form-->
        </div>

        <!--客服权限管理-->
        <div class="data_list_panel">
            <waiting-list :custom-type-list="assignRolesList" :search-form="form" :active-tab="activeTab" v-if="activeTab === 'waitingList'" @getData="getData" @search="hasSearch">待分配</waiting-list>
            <custom-assistant :active-tab="activeTab" :search-form="form" v-if="activeTab === 'customAssistant'" @getData="getData" @search="hasSearch" :is-captain="isCaptain">电销专员</custom-assistant>
            <custom-manage :active-tab="activeTab" :role-type="form.roleId" :search-form="form" v-if="activeTab === 'customManage'" @getData="getData" @search="hasSearch">电销组长</custom-manage>
            <!--<order-list :active-tab="activeTab" :search-form="form" v-if="activeTab === 'orderList'" @updateActiveTab="updateActiveTab"></order-list>-->
            <customer-distribution :active-tab="activeTab" :search-form="custInfo" @search="hasSearch" @updateActiveTab="updateActiveTab" v-if="activeTab === 'customerDistribution'">处理中订单</customer-distribution>
        </div>
    </div>
</template>

<script>
import waitingList from './waiting-list';
import customAssistant from './custom-assistant/index';
import customManage from './custom-manage';
// import OrderList from './order-list';
import customerDistribution from './component/customer-distribution';
export default {
    name: 'serviceManage',
    components: {
        waitingList,
        // OrderList,
        customAssistant,
        customManage,
        customerDistribution
    },
    data() {
        return {
            activeTab: 'customManage',
            customTypeList: [],
            assignRolesList: [],
            serverList: [],
            captainList: [],
            isCaptain: true,
            user: this.$storage.get('user'),
            form: {
                username: '',
                roleId: 2,
                leaderId: '',
                search: false,
                // userId: '', // 客服人员id
            },
            custInfo:{
                userId: '', // 客服人员id
                username:''
            },
            rules: {
                username: [],
                roleId: []
            },
        };
    },
    computed: {
        showAuditorSearch() {
            // return this.activeTab !== 'orderFirstAudit' && this.activeTab !== 'orderLastAudit';
            return this.activeTab !== 'customerDistribution';
        }
    },
    methods: {
        // 获取客服角色
        getServiceType() {
            this.$api.telSales.getAllUserRole().then((res) => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error) {
                    this.customTypeList = JSON.parse(JSON.stringify(data));
                    // this.customTypeList.forEach((item, index) => {
                    //     // 这里需要去掉客服经理
                    //     if (item.roleId === 3) {
                    //         this.customTypeList.splice(index, 1);
                    //     }
                    // });
                    this.assignRolesList=JSON.parse(JSON.stringify(this.customTypeList));
                    this.customTypeList.push({ roleId: 0, roleName: '待分配', idName: 'Pending Assignment' });
                }
            });
        },
        onSearch() {
            this.form.username = this.form.username.trim();
            this.form.search = true;
        },
        // eslint-disable-next-line
        hasSearch(val) {
            this.form.search = false;
        },
        updateActiveTab(val) {
            if (val) {
                this.activeTab = val;
            }
        },
        roleTypeChange(val) {
            this.form.username = '';
            switch (+val) {
                case 3:
                    this.activeTab = 'customManage';
                    break;
                case 2:
                    this.activeTab = 'customManage';
                    break;
                case 0:
                    this.activeTab = 'waitingList';
                    break;
                case 1:
                    this.activeTab = 'customAssistant';
                    break;
                default:
                    this.activeTab = 'customManage';
            }
        },
        // 需要获取
        getData(form, type) {
            if(type === "customerDistribution"){
                this.custInfo = Object.assign(this.custInfo, form);
            }else{
                this.form = Object.assign(this.form, form);
            }
            this.activeTab = type;
        },
        // 客服主管
        getCaptainList() {
            const params = {
                roleId: 2,
                username: '',
                // leaderId: this.user.id,
            };
            this.$api.telSales.getAllUserInfo(params).then((res) => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error && data.data) {
                    this.captainList = data.data;
                    const user = this.$storage.get('user');
                    this.isCaptain = false;
                    this.captainList.forEach((item) => {
                        if (item.username === user.username) {
                            this.isCaptain = true;
                            this.form.roleId = 1;
                            this.activeTab = 'customAssistant';
                        }
                    });
                    if (!this.isCaptain) {
                        this.activeTab = 'customManage';
                    }
                }
            });
        },
    },
    created() {
        this.getCaptainList();
        this.getServiceType();
    }
};
</script>

<style lang="scss" scoped>
.data_list_panel{
    margin: 0;
}
.search{
    background-color: #fff;
    padding: 22px 40px 0;
}
</style>
